<script lang="ts">
import Briefcase from '~/assets/imgs/lottery/briefcase.png';

export const signUpForGiftingTipsPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./SignUpForGiftingTips.vue')),
  {
    wrapClassName: 'ant-cover__Modal-drawer',
    centered: true,
    footer: null,
  },
);
</script>

<script setup lang="ts">
const props = defineProps(['close']);
const emits = defineEmits<{
  close: [];
}>();
const currencyStore = useCurrencyStore();
const isFiat = computed(() => currencyStore.fiatMap?.hasOwnProperty(currencyStore.cryptoName));
function close() {
  props?.close();
  emits('close');
}
</script>

<template>
  <div class="flex-center flex-col p-10">
    <img :src="Briefcase" class="mb-2.5 w-15 object-cover">
    <I18nT keypath="nywH8Ki05U4dFaom7fGza" tag="div" class="mb-4.5 text-base text-white font-600 leading-normal">
      <template #amount>
        <span class="text-yellow-500">
          <TAmount v-if="isFiat" :value="currencyStore.convert('USD', 15, currencyStore.cryptoName)" :decimals="0" :symbol="(currencyStore.cryptoName === 'DIAMOND' ? 'USDT' : currencyStore.cryptoName)" format="fixed-dec" colored="inherit" iconPos="left" />
          <TAmount v-else :value="15" :decimals="0" symbol="USD" format="fixed-dec" colored="inherit" iconPos="left" />
        </span>
      </template>
    </I18nT>

    <AButton type="primary" class="ant-cover__Button-3d-primary w-55" @click=" emits('close')">
      {{ $t('hzTtYuwRmOq7RNfNsgjzt') }}
    </AButton>

    <span class="text-md mt-2.5 cursor-pointer text-sys-text-body font-600 leading-normal" @click="close">{{ $t('fkhvKrBofs87Ylh0ZrauX') }}</span>
  </div>
</template>

<style scoped lang="scss">

</style>
